<template>
  <div class="Profit">
    <el-card shadow="never">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="申请日期:">
          <el-date-picker v-model="getTime" style="width: 220px;" size="mini" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="handleDateChange" popper-class="form-data-ccc" />
        </el-form-item>
        <el-form-item label="申请人:">
          <el-input v-model="formInline.applicant" size="mini" />
        </el-form-item>

      </el-form>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="账户类型:">
          <el-select v-model="formInline.accountType" size="mini">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in AccountType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属阶段">
          <el-select v-model="formInline.stage" size="mini">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in PhaseList1" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="subimit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin-top: 20px;">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="refundTime" align="center" label="申请日期" width="160" />
        <!-- <el-table-column
          prop="disposeTime"
          align="center"
          label="退款处理时间"
        /> -->
        <el-table-column prop="accountType" align="center" label="账户类型">
          <template v-slot="{ row }">
            <span v-if="row.accountType === 0">外汇</span>
            <span v-if="row.accountType === 1">美股</span>
            <span v-if="row.accountType === 2">期货</span>
          </template>
        </el-table-column>
        <el-table-column prop="challengeProject" align="center" label="挑战项目">
          <template v-slot="{ row }">
            <span v-if="row.challengeProject === 0">评估</span>
            <span v-if="row.challengeProject === 1">即时</span>
            <span v-if="row.challengeProject === 2">固定</span>
            <span v-if="row.challengeProject === 3">比赛</span>
            <span v-if="row.challengeProject === 4">股票</span>
            <span v-if="row.challengeProject === 5">免费评估</span>
          </template>
        </el-table-column>
        <el-table-column prop="stage" align="center" label="所属阶段">
          <template v-slot="{ row }">
            <span v-if="row.stage === 0">资格评估</span>
            <span v-if="row.stage === 1">资质验证</span>
            <span v-if="row.stage === 2">合作</span>
            <span v-if="row.stage === 3">比赛</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountMoney" align="center" label="账户规模" />
        <el-table-column prop="accountNumber" align="center" label="交易账号" width="160" />
        <el-table-column prop="refundName" align="center" label="申请人" />
        <el-table-column prop="refundEmails" align="center" label="邮箱" />
        <el-table-column prop="method" align="center" label="退款方式">
          <template v-slot="{ row }">
            <span v-if="row.method === 1">银行卡</span>
            <span v-if="row.method === 2">加密货币</span>
            <span v-if="row.method === 3">stripe</span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--            prop="typesOfRefund"-->
        <!--            align="center"-->
        <!--            label="退款类型"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            <span v-if="row.typesOfRefund===1">银行卡</span>-->
        <!--            <span v-if="row.typesOfRefund===2">加密货币</span>-->
        <!--            <span v-if="row.typesOfRefund===3">strap</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!-- <el-table-column
          prop="applyTime"
          align="center"
          label="退款申请时间"
        /> -->
        <el-table-column prop="refundAmount" align="center" label="退款金额" />
        <el-table-column prop="refundType" align="center" width="160px" label="客服操作">
          <template v-slot="{ row }">
            <span v-if="row.refundType === 1">未操作退报名费 </span>
            <span v-if="row.refundType === 2">已操作退报名费</span>
            <el-button type="text" v-if="row.refundType === 3" @click="verifyTypeDialog(row.id)">未处理</el-button>
            <span v-if="row.refundType === 4">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column prop="serviceName" align="center" label="客服操作人" width="100" />
        <el-table-column prop="serviceTime" align="center" label="审核时间" width="140" />
        <el-table-column align="center" width="200" label="财务操作">
          <!-- 0未处理1已经处理  2已经拒绝 -->
          <template v-slot="{ row }">
            <el-button v-if="row.refundResult === 1" type="text" @click="delBtn(row)">未处理</el-button>
            <span v-if="row.refundResult === 2">已处理</span>
            <span v-if="row.refundResult === 3">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column prop="handlerName" align="center" label="财务操作人" width="100" />
        <el-table-column prop="processingTime" align="center" label="打款时间" width="140" />
        <!--        <el-table-column-->
        <!--            prop="refundType"-->
        <!--            align="center"-->
        <!--            label="退款类型"-->
        <!--            width="160"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            <span v-if="row.refundType===1">未操作报名费</span>-->
        <!--            <span v-if="row.refundType===2">已操作报名费</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="refuseReason" align="center" label="备注" width="160">
          <template v-slot="{ row }">
            <span>{{ row.refundRemark }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--            prop="refuseReason"-->
        <!--            align="center"-->
        <!--            label="修改备注"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            <el-button type="text" @click="openRemarks(row.id)">修改</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <paging :page-size="formInline.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
    <addProfitList ref="addProfitlist" :dialog-row="dialogRow" :dialog-visible.sync="dialogVisible"
      @refresh="getRefundListArr" />
    <el-dialog title="客服操作" :visible.sync="dialogVerifyTypeFormVisible" width="30%">
      <el-form :model="VerifyTypeForm">
        <el-form-item label="客服操作" label-width="100px">
          <el-select v-model="VerifyTypeForm.refundType" placeholder="请选择客服核实的阶段" size="mini">
            <el-option label="未操作退报名费" value="1"></el-option>
            <el-option label="已操作退报名费" value="2"></el-option>
            <el-option label="驳回" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="100px" v-if="VerifyTypeForm.refundType === '4'">
          <el-input v-model="VerifyTypeForm.refundRemark" placeholder="请输入备注" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVerifyTypeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnVerifyType">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import paging from '@/components/paging.vue'
import { AccountType, PhaseList1, modifyTimeToEndOfDay } from '@/utils'
import { getPhase, getRefundList } from '@/api/Profit'
import { getAccountType, submitCustomers, updateRemark } from '@/api/Tradingacct'
import addProfitList from './components/addProfitlist'

export default {
  name: 'VueAdminProfitlist',
  components: {
    paging,
    addProfitList
  },
  data() {
    return {
      dialogVisible: false,
      // dialogFormVisibleRemarks: false,
      dialogVerifyTypeFormVisible: false, // 客服操作弹出框
      VerifyTypeForm: {
        id: null, // id
        refundType: null, // 客服核实的阶段
        refundRemark: null, // 备注
      },
      RemarksForm: {
        tagName: null,
        id: null,
      },
      total: 0,
      tableData: [
        { accountStage: 0 }
      ],
      getTime: '1',
      formInline: {
        accountType: null,
        stage: null,
        beginTime: null,
        endTime: null,
        page: 1,
        pageSize: 10,
        applicant: null
      },
      // AccountType: [],
      // PhaseList: [],
      dialogRow: {}
    }
  },
  computed: {
    PhaseList1() {
      return PhaseList1
    },
    AccountType() {
      return AccountType
    }
  },

  mounted() {
    this.getuseACCouyt()
    // this.getPhaselist()
    this.getRefundListArr()
    console.log('dddddd', this.$refs.addProfitlist)
  },

  methods: {
    // 列表
    async getRefundListArr() {
      const data = await getRefundList(this.formInline)
      this.tableData = data.records
      this.total = data.total
    },
    handleDateChange() {
      if (this.getTime !== null) {
        this.getTime[1] = modifyTimeToEndOfDay(this.getTime[1])
        this.formInline.beginTime = this.getTime[0]
        this.formInline.endTime = this.getTime[1]
      } else {
        this.formInline.beginTime = ''
        this.formInline.endTime = ''
      }
    },
    // async getPhaselist() {
    //   // const  data  = await getPhase()
    //   // this.PhaseList = data
    // },
    async getuseACCouyt() {
      const data = await getAccountType()
      this.AccountType = data
    },
    // 查询
    subimit() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.formInline.page = 1
        this.getRefundListArr()
      }, 100)
    },
    // 后期要改
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getRefundListArr()
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getRefundListArr()
    },
    // 未处理
    delBtn(row) {

      this.dialogRow = row
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.addProfitlist.getWithdrawInfos(row)
      })
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 打开客服操作弹出框
     * @date
     */
    verifyTypeDialog(id) {
      this.VerifyTypeForm.id = id
      this.dialogVerifyTypeFormVisible = true
    },

    async btnVerifyType() {
      const res = await submitCustomers(this.VerifyTypeForm)
      this.dialogVerifyTypeFormVisible = false
      await this.getRefundListArr()
      this.$message.success(res.paymentResult)
    }

    // openRemarks(id) {
    //   this.dialogFormVisibleRemarks = true
    //   this.RemarksForm.id = id
    // },

    // async RemarksBtn() {
    //   await updateRemark(this.RemarksForm)
    //   this.$message({
    //     type: 'success',
    //     message: '修改成功'
    //   })
    //   await this.getRefundListArr()
    //   this.dialogFormVisibleRemarks = false
    // }
  }
}
</script>

<style lang="scss" scoped>
@media (max-width:768px) {

  .el-form-item {
    display: flex;


  }
}
</style>
